<template>
	<!-- 文章编辑页 -->
	<view class="editor">
		<!-- 导航栏 -->
		<!-- :custom-back="customback" -->
		<u-navbar 
		:title="(userInfo && userInfo.token) ? '编辑博客' : '登陆或者注册'" 
		:is-back="true" 
		:background="navBgStyle" 
		title-color="#fff" 
		back-icon-color="#fff" 
		:custom-back="customback"
		>
		</u-navbar>
		
		<!-- 编辑内容 -->
		<view class="editor-main"  v-if="userInfo && userInfo.token">
			<u-form :model="artFormData" ref="artForm" >
				<u-form-item :required="true" label-position="top" label="文章标题:" prop="title">
					<u-input v-model="artFormData.title" placeholder="请输入文章标题..." maxlength="32" :focus="true" :custom-style="textInpStyle"/>
				</u-form-item>
				
				<u-form-item  :required="true" label-position="top" label="文章封面(必选):" prop="cover">
					<u-upload 
					ref="coverupload"
					:action="imgUploadUrl"
					:header="getToken"
					:auto-upload="true" 
					max-count="1" 
					:max-size="2 * 1024 * 1024"
					:show-progress="isShowProgress"
					:before-upload="showProgress"
					@on-uploaded="coverUploaded"
					>
					</u-upload>
				</u-form-item>
				
				<u-form-item label-position="top" :required="true" label="文章分类:" prop="classify">
					<u-input 
					:value="artFormData.classifyName"
					v-model="artFormData.classifyName"
					type="select" 
					@click="show = true" 
					placeholder="请选择分类..."/>
					
					<u-select
					v-model="show" 
					:list="classifyList" 
					value-name="id" 
					label-name="classifyName"
					@confirm="selectClass"
					>
					</u-select>
				</u-form-item>
				<u-form-item :required="true" label-position="top" label="文章内容:" prop="content">
					<jinEdit 
					placeholder="请输入内容..." 
					:header="getToken"
					:uploadFileUrl="imgUploadUrl"
					:html="artFormData.content"
					@editOk="sendArt"
					></jinEdit>
				</u-form-item>
			</u-form> 
		
			<view>
				<u-toast ref="uToast" />
			</view>
		</view>
		<view class="login-wrap" v-else>
			<login></login>	
		</view>
	
	
		<!-- 底部导航栏 -->
		<u-tabbar
		:list="tabbarList" 
		:mid-button="true"
		active-color="skyblue"
		:show="false"
		>
		</u-tabbar>
		
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import jinEdit from '../../components/jin-edit/jin-edit.vue'; // 富文本编辑器
	export default {
		data() {
			return {
				// 图片上传地址
				imgUploadUrl: 'https://eggblog.bluej.cn/api/imgUpload',
				
				// 表单数据
				artFormData: {
					title: "",			// 文章标题
					classifyArr: [],		// 分类id 
					classifyName:"",	// 分类名称
					cover:"",		// 封面图片组
					content:"",			// 文章内容 
					projectId: 181,		//	项目id
				},
				// 文本输入框的样式
				textInpStyle: {
					fontSize:"36rpx",
					paddingLeft:"10px"
				},
				// 所有分类信息
				classifyList: [],
				// 控制分类选项显示
				show: false,
				// 控制上传进度条显示
				isShowProgress: true,
				// 表单验证规则
				artFormRules: {
					title: [
						{
							required: true,  // 必填项
							message:"此为必填项",
							trigger: ['change','blur'], //触发验证方式 
						},
						{
							min: 3,
							max: 32,
							message: '长度在3-32个字符之间',
							trigger: ['change','blur']
						}
					],
				}
			}
		},
		onLoad () {
			// 获取分类列表
			this.getClassify()
		},
		onReady() {
			if (this.$refs.artForm) {
				// 表单校验
				this.$refs.artForm.setRules(this.artFormRules);
			}
		},
		
		methods: {
			// 关闭并且返回上一页
			customback() {
				//console.log(this.$Router)
				this.$Router.pushTab({
					path: this.routerFrom
				}) 
				
			},
			// 获取大分类
			async getClassify () {
				let classifyRes = await this._api.getClassify();
				
				this.classifyList = classifyRes.rows
			},
			// 选择分类回调
			selectClass(e) {
				this.artFormData.classifyArr.push(e[0].value);
				this.artFormData.classifyName = e[0].label;
			},
			// 封面图片上传前触发
			showProgress() {
				// 让上传进度条显示
				this.isShowProgress = true;
			},
			//  封面图片上传完成触发
			coverUploaded(lists, name) {
				lists = lists.map(item => {
					return item.response.data[0];
				})
				// 上传完成 隐藏进度条
				this.isShowProgress = false;
				this.artFormData.cover = lists[0];
				// console.log(lists);
			},
			//  发布文章
			async sendArt({html,text,delta,isPublic}) {
				let { artFormData } = this;
				// 同步内容
				artFormData.content = html;
				// console.log(artFormData);
				if (!(artFormData.title && artFormData.classifyArr && artFormData.content && artFormData.cover)) {
					return this.$u.toast('缺少必填内容');
				}
				if (!isPublic) {
					return this.$u.toast('功能暂未开放~');
				}
				
				
				try{
					let createRes = await this._api.createBlog({
						title: artFormData.title,
						content: artFormData.content ,
						cover : artFormData.cover,
						classifyArr : artFormData.classifyArr,
						projectId : artFormData.projectId
					})
					// 重置表单数据
					artFormData.title = "";
					artFormData.classifyArr = [];
					artFormData.classifyName = "";
					artFormData.cover = "";
					artFormData.content = "";
					this.$refs.coverupload.clear();
					this.$refs.uToast.show({
						title: '发布成功',
						type: 'success',
						url: 'pages/index/index',
						isTab: true
					}) 
				}catch(e){
					this.$u.toast(e.msg)
				}
			}
		},
		components: {
			jinEdit
		},
		computed:{
			...mapState({
				tabbarList: state => state.componStyle.tabbarList,	// 	tabbar列表
				navBgStyle: state => state.componStyle.navBgStyle,	//	顶部导航栏样式
				userInfo: state => state.userInfo.userInfo,			//	用户信息
				routerFrom: state => state.routerInfo.routerFrom
			}),
			getToken() {
				if (this.userInfo && this.userInfo.token) {
					return {
						'x-token' :this.userInfo.token
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.editor {
	background-color: #fff;
	.editor-main {
		padding: 0 40rpx 0;
	}
	.login-wrap {
		padding-top: 30rpx;
	}
}
</style>
